<template>
  <div class="">
    <div class="search-input">
    <i class="iconfont iconsearch"></i>
    <input type="text" placeholder="搜索歌曲" v-model="searchWord" @input="handleToSuggers"
    @keydown.enter="handleToResult($event) ,handleAddHistory($event)" >
    <i v-if="searchWord" class="iconfont iconguanbi" @click="handleToColse"></i>
  </div>
  <template v-if="searchType == 1">
    <div class="search-history">
      <div class="search-history-head">
        <span>历史记录</span>
        <i class="iconfont iconlajitong" @click="handleToClear()"></i>
      </div>
      <div class="search-history-list">
          <div v-for="item in historyList" :key="item.id" @click="handleItemResult(item)">{{ item }}</div>
      </div>
    </div>
  </template>
  <template v-else-if="searchType == 2">
    <div class="search-result">
      <div class="search-result-item" v-for="item in resultList" :key="item.id">
        <div class="search-result-word">
          <div>{{ item.name }}</div>
        </div>
        <i class="iconfont iconbofang"></i>
      </div>
    </div>
  </template>
  <template v-else-if="searchType == 3">
    <div class="search-suggest">
      <div class="search-suggest-head">搜索 {{ searchWord }}</div>
      <div class="search-suggest-item" v-for="item in suggestList" :key="item.id" @click="handleItemResult(item.name),handleAddHistory(item.name)">
        <i class="iconfont iconsearch"></i>{{ item.name }}
      </div>
    </div>
  </template>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios' //可以做到拉取跨域的代码
import '@/assets/iconfont/iconfont.css';
//第一件事情拟定use函数模拟需要操作的变量
function useSearch(){
  let searchType = ref(1)//模拟对于页面的切换
  let searchWord = ref('')//去模拟input框中所输入的，用model绑定双向数据绑定 来判断数据展示与否
  let handleToColse = ()=>{
     searchWord.value = ''
     searchType.value = 1;
  } //来模拟点击清空按钮把input框的值清空 
  return {
    searchType,
    searchWord,
    handleToColse
  }   
}
//搜索框的下拉列表
function useSuggest(){
  let suggestList = ref([]);//拟定之后会放入接口所包含的参数
  let handleToSuggers = () => {
      if(searchWord.value){   //判断输入框是否传入了值
        searchType.value = 3;  //有值就跳转到对应所需要的页面
        axios.get(`/api/search/suggest/?keywords=${searchWord.value}`).then((resp)=>{
          let result = resp.data.result;
          if(!result.order){
            return;
          }//如果没有值则直接返回
          let tmp =[];
          for(let i=0;i<result.order.length;i++){
            tmp.push(...result[result.order[i]])
          }
          suggestList.value = tmp;
        })
      }else{
          searchType.value =1
      }
  };
  return {
    suggestList,
    handleToSuggers
  }
}
//比较清晰的数据展示
function useResult(){
  let resultList = ref([]);//拟定之后会放入接口所包含的参数
  let handleToResult = () => {
      if(!searchWord.value){   //判断输入框是否传入了值
          return;
      }
      axios.get(`/api/search/?keywords=${searchWord.value}`).then((resp)=>{
          let result = resp.data.result;
          if(!result.songs){
            return;
          }//如果没有值则直接返回
          searchType.value =2
          resultList.value = result.songs
          console.log(resultList);
        })
    
  };
  let handleItemResult = (item)=>{
     searchWord.value = item
     handleToResult()
  }
  return {
    resultList,
    handleToResult,
    handleItemResult
  }
}
function useHistory(){
  let key = 'searchHistory'
  let getSearchHistory = ()=>{
    return JSON.parse(localStorage.getItem(key) || '[]') //获取到本地保存的数据
  }
  let setSearchHistroy = (list)=>{
      localStorage.setItem(key,JSON.stringify(list))
  }
  let clearSearchHistory = () =>{
    localStorage.removeItem(key)
  };
  let historyList = ref(getSearchHistory());//用ref获取到数据
  let handleAddHistory = (arg)=>{
    //arg属于是从详情页添加到我们的历史记录 //或者从输入框获取比较模糊的历史记录
    if(!searchWord.value){
      return;
    }
    //判断input是否有输入数据
    if(typeof arg === 'string'){
        searchWord.value = arg
    }//这是从下拉列表点击下拉的项，影响到searchWord的数据
    historyList.value.unshift(searchWord.value)
    historyList.value = [...new Set(historyList.value)]  //这是做的一个去重的效果
    setSearchHistroy(historyList.value) //从添加完数据后 保存到本地
  };
  let handleToClear = () =>{
      clearSearchHistory()//清空本地所保存的所有数据
      historyList.value = []
  };//这是一个清空历史记录的模块
  return {
     historyList,
     handleAddHistory,
     handleToClear
  }
}
let { searchType,searchWord,handleToColse } = useSearch() //拟定基础的数据
let { handleToSuggers ,suggestList} = useSuggest()
let { handleToResult,resultList,handleItemResult } = useResult()
let { historyList,handleAddHistory,handleToClear } = useHistory()
</script>
<style lang="scss">
.search-input{ display: flex; align-items: center; height:35px; margin:35px 15px 25px 15px; background:#f7f7f7; border-radius: 25px;}
.search-input i{ margin:0 13px;}
.search-input input{ flex:1; font-size:14px; border:none; background:#f7f7f7; outline: none;}

.search-history{ margin:0 15px 25px 15px; font-size:14px;}
.search-history-head{ display: flex; justify-content: space-between; margin-bottom:18px;}
.search-history-list{ display: flex; flex-wrap: wrap;}
.search-history-list div{ padding:8px 14px; border-radius: 20px; margin-right:15px; margin-bottom: 15px; background:#f7f7f7;}

.search-result{ border-top:1px #e4e4e4 solid; padding:15px;}
.search-result-item{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; margin-bottom: 15px; border-bottom:1px #e4e4e4 solid;}
.search-result-word div:nth-child(1){ font-size:16px; color:#235790; margin-bottom: 6px;}
.search-result-word div:nth-child(2){ font-size:14px; color:#898989;}
.search-result-item i{ font-size:30px; color:#878787;}

.search-suggest{ border-top:1px #e4e4e4 solid; padding:15px; font-size:14px;}
.search-suggest-head{ color:#4574a5; margin-bottom:37px;}
.search-suggest-item{ color:#5d5d5d; margin-bottom:37px;}
.search-suggest-item i{ color:#bdbdbd; margin-right:14px; position: relative; top:1px;}
</style>
